<template>
  <table>
    <thead>
      <tr>
        <th>#</th>
        <th width="300px">{{$t('statistics.address')}}</th>
        <th>{{$t('statistics.pay_time')}}</th>
        <th>{{$t('statistics.pay_amount')}}</th>
        <th>{{$t('statistics.pay_detail')}}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-if="list.length === 0 && !loading">
        <td colspan="5">{{$t('unit.no_data')}}</td>
      </tr>
      <template v-else>
        <tr v-for="(v,i) in list" :key="i">
          <td>{{i+1}}</td>
          <td>
            <el-tooltip placement="top" effect="light">
              <div slot="content">{{v.address}}</div>
              <a target="_blank" :href="addressUrl(v.address)" class="pointer text-truncate">{{v.address}}</a>
            </el-tooltip>
          </td>
          <td>{{v.timestamp | utc2bj}}</td>
          <td>{{amount(v.amount)}} {{coin_type_up}}</td>
          <td>
            <a target="_blank" class="todetai" :href="txUrl(v.tx)">{{$t('statistics.detail')}}</a>
          </td>
        </tr>
      </template>
    </tbody>
  </table>
</template>
<script>
import { InPoolPaymets } from '@/api';
import lang from '@/lang';

export default {
  props: {
    coin_type: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      loading: false,
      list: [],
      timer: undefined,
    };
  },
  computed: {
    coin_type_up() {
      return this.coin_type.toUpperCase();
    },
  },
  created() {
    this.getInPoolPaymets();
    this.timer = window.setInterval(() => {
      this.getInPoolPaymets();
    }, 15000);
  },
  beforeDestroy() {
    window.clearInterval(this.timer);
  },
  methods: {
    addressUrl(k) {
      if (this.coin_type === 'eth') {
        return `https://etherscan.io/address/${k}`;
      }
      return `https://explorer.mvs.org/adr/${k}`;
    },
    txUrl(k) {
      if (this.coin_type === 'eth') {
        return `https://etherscan.io/tx/${k}`;
      }
      return `https://explorer.mvs.org/tx/${k}`;
    },
    amount(v) {
      if (this.coin_type === 'eth') {
        return (v / (10 ** 9)).toFixed(5);
      }
      return (v / (10 ** 8)).toFixed(8);
    },
    getInPoolPaymets() {
      if (this.loading || !this.coin_type) {
        return;
      }
      this.loading = true;
      InPoolPaymets({ coin_type: this.coin_type }).then((res) => {
        if (res.data.status === 1) {
          this.list = res.data.data;
        }
        this.loading = false;
      }).catch(() => {
        this.$message.error(lang.t('error.catchError'));
        this.loading = false;
      });
    },
  },
};
</script>
